//
// Variables
// --------------------------------------------------

// init
$dark-color01: #79879c;
$dark-color02: #6b7b95;
$dark-color03: #5f708a;
$dark-color04: #4a5974;
$dark-color05: #404e68;
$dark-color06: #36435c;
$dark-color07: #242e42;
$dark-color08: #181d28;
$light-color01: #f9fbfd;
$light-color02: #eff4f9;
$light-color03: #e3e9ef;
$light-color04: #d8dee5;
$light-color05: #d1d7df;
$light-color06: #ccd3db;
$light-color07: #c1c9d1;
$light-color08: #abb4be;
$green-color01: #c4e6d4;
$green-color02: #a2d8bb;
$green-color03: #55bc8a;
$green-color04: #479e88;
$green-color05: #3b747a;
$blue-color01: #c7deef;
$blue-color02: #7eb8dc;
$blue-color03: #329dce;
$blue-color04: #3385b0;
$blue-color05: #326e93;
$red-color01: #fae7e5;
$red-color02: #ea8573;
$red-color03: #ca2621;
$red-color04: #ab2f29;
$red-color05: #8c3231;
$yellow-color01: #ffe1be;
$yellow-color02: #ffc781;
$yellow-color03: #f5a623;
$yellow-color04: #e0992c;
$yellow-color05: #8d663e;
$white: #ffffff;
$black: #000000;

// specific color
$dark: $dark-color07;
$dark-grey: $dark-color03;
$grey: $dark-color01;
$lightest: $light-color01;
$light: $light-color02;
$green: $green-color03;
$blue: $blue-color03;
$yellow: $yellow-color03;
$yellow-dark: $yellow-color04;
$red: $red-color03;
$red-dark: $red-color04;

$primary: $green-color03;
$sub: $blue-color03;
$warning: $yellow-color03;
$danger: $red-color03;

$title-color: $dark-color06;
$second-title-color: $dark-color03;
$text-color: $dark-color07;
$second-text-color: $dark-color01;
$third-text-color: $dark-color04;
$placeholder-color: $dark-color03;
$input-color: $dark-color07;
$head-color: $dark-color07;

// border
$border-color: $light-color06;
$border-hover-color: $dark-color01;
$second-border-color: $light-color02;
$border-focus-color: $green-color03;
$border-radius: 4px;

// input
$input-border-color: $light-color08;
$input-hover-color: $dark-color01;
$input-focus-color: $green-color03;
$input-error-color: $red-color03;
$input-border-radius: 4px;

// background
$bg-color: $light-color02;
$body-bg-color: $light-color02;
$th-bg-color: $light-color01;
$card-bg-color: $light-color01;

$btn-default-bg: $light-color02;
$btn-default-border: $light-color06;
$btn-default-hover-bg: $light-color03;
$btn-default-hover-border: $light-color07;
$btn-default-active-bg: $light-color08;
$btn-default-active-border: $light-color07;
$btn-primary-bg: $green-color03;
$btn-primary-hover-bg: $green-color03;
$btn-control-bg: $dark-color07;
$btn-control-hover-bg: $dark-color07;
$btn-danger-bg: $red-color03;
$btn-danger-active-bg: $red-color04;
$btn-flat-hover-bg: $light-color03;
$btn-flat-active-bg: $light-color04;

$table-expanded-row-bg: #fdfeff;
$table-row-hover-bg: #f5f8f9;
$select-option-hover-bg: #f5f7f8;

$text-colors: (
  primary: $text-color,
  secondary: $second-text-color,
  third: $third-text-color,
  light: $white,
);

// shadow
$base-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06);
$title-shadow: 0 2px 4px rgba(72, 91, 127, 0.4);
$head-shadow: 0 4px 8px rgba(36, 46, 66, 0.1);

$btn-text-shadow: 0 2px 4px rgba(36, 46, 66, 0.1);
$btn-default-shadow: none;
$btn-default-active-shadow: inset 0 4px 8px 0 rgba(36, 46, 66, 0.12);
$btn-primary-shadow: 0 8px 16px 0 rgba(85, 188, 138, 0.36);
$btn-primary-active-shadow: inset 0 4px 8px 0 rgba(35, 45, 65, 0.24);
$btn-control-shadow: 0 8px 16px 0 rgba(35, 45, 65, 0.28);
$btn-danger-shadow: 0 8px 16px 0 rgba(202, 38, 33, 0.28);

$card-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06);
$card-hover-shadow: 0 6px 16px 0 rgba(33, 43, 54, 0.2);
$card-selector-shadow: 0 8px 16px 0 rgba(36, 46, 66, 0.08);

$tr-shadow: inset 0 2px 4px 0 rgba(72, 91, 127, 0.2);

// font
$font-family: 'PingFang SC', 'Lantinghei SC', 'Helvetica Neue', Helvetica, Arial,
  'Microsoft YaHei', 微软雅黑, STHeitiSC-Light, simsun, 宋体,
  'WenQuanYi Zen Hei', 'WenQuanYi Micro Hei', sans-serif;
$font-family-id: Roboto, $font-family;
$font-family-code: 'PT Mono', Monaco, Menlo, Consolas, 'Courier New', monospace;

$size-small: 12px;
$size-normal: 14px;
$size-medium: 16px; // 中号字体
$size-mid-large: 24px;
$size-large: 28px;
$body-size: $size-small;

$font-bold: 600;
$font-normal: 400;
$font-thin: 300;

// animation
$trans-speed: 0.3s;

// size
$content-width: 1164px;
$apps-content-width: 1280px;
$nav-width: 260px;
$narrow-nav-width: 240px;
$header-height: 68px;
$detail-info-width: 354px;
$modal-width: 691px;
$modal-large-width: 1162px;
$headings: (
  h1: 40px,
  h2: 32px,
  h3: 24px,
  h4: 20px,
  h5: 16px,
  h6: 14px,
);
$heading-heights: (
  h1: 56px,
  h2: 44px,
  h3: 32px,
  h4: 28px,
  h5: 20px,
  h6: 20px,
);
$icon-status-info: url('');
$icon-status-success: url('');
$icon-status-warning: url('');
$icon-status-error: url('');

$kube-tools-z-index: 1999;
$kube-pop-up-window-z-index: $kube-tools-z-index + 1;

// tree
$tree-node-height: 32px;
$tree-border-radius: 2px;
$tree-text-color: $dark-color07;
$tree-node-hover-bg: $light-color02;
$tree-node-selected-bg: $dark-color07;
$tree-switch-hover-color: $light-color06;
